<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理员登录</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link th:href="@{/animate.min.css}" rel="stylesheet">
</head>
<body style="background-color: #F8F8F8">
<div style="position: absolute;left: 0;right: 0;top: 0;bottom: 0">
    <div style="display: flex;justify-content: center;margin-top: 10%">
        <div class="animated fadeIn" style="width: 20%;background-color: #fff;border: solid
        #337AB7 1px;border-radius: 10px;box-shadow: 0 0
        10px
        #337AB7
        ;padding:
        20px">

            <div class="layui-card">
                <h2 style="text-align: center"
                    class="layui-card-header"><strong style="font-size: 20px">管理员登录</strong></h2>
            </div>

            <form class="layui-form" method="post" action="/adminController/login">

                <div class="layui-form-item">
                    <div style="display: flex;justify-content: center">
                        <label class="layui-form-label">登录名</label>
                        <div>
                            <input style="width: 78%;border-left: none; border-right: none; border-top: none;
                            border-bottom:1px solid #337AB7" maxlength="10" type="text" name="loginName"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="display: flex;justify-content: center">
                        <label class="layui-form-label">密码</label>
                        <div>
                            <input style="width: 78%;border-left: none; border-right: none; border-top: none; border-bottom: 1px
                             solid #337AB7" maxlength="20" type="password" name="password" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div style="text-align: center;color: red;">
                        <div th:if="${errMsg != null}">
                            <text th:text="${errMsg}"></text>
                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div style="display: flex;height: 30px;margin-top: 25px;justify-content: center">
                        <button id="loginBtn" type="submit"
                                style="width: 65%;background-color: #337AB7;color: white;
                                border-radius: 30px;border: #337AB7;cursor: pointer">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script th:src="@{/layui/jquery-1.11.2.js}"></script>
<script th:src="@{/layui/layui.all.js}" charset="utf-8"></script>
<script>
    layui.use(['element','form','table','layer'], function () {
        var element = layui.element;
        var form=layui.form;
        var table=layui.table;
        var layer=layui.layer;
    });
</script>

</body>
</html>